<template>
  <div class="md-layout text-center">
    <div class="md-layout-item md-size-33 md-medium-size-50 md-small-size-70 md-xsmall-size-100">
      <login-card header-color="green">
        <h4 slot="title" class="title">登录</h4>
        <md-button slot="buttons" to="#facebook" class="md-just-icon md-simple md-white">
          <i class="fab fa-weibo"></i>
        </md-button>
        <md-button slot="buttons" to="#twitter" class="md-just-icon md-simple md-white">
          <i class="fab fa-twitter"></i>
        </md-button>
        <md-button slot="buttons" to="#google" class="md-just-icon md-simple md-white">
          <i class="fab fa-google-plus-g"></i>
        </md-button>
        <p slot="description" class="description">CRM系统</p>
        <md-field class="md-form-group" slot="inputs">
          <md-icon>email</md-icon>
          <label>邮箱...</label>
          <md-input v-model="email" type="email" @keyup.native.enter.prevent="login"></md-input>
        </md-field>
        <md-field class="md-form-group" slot="inputs">
          <md-icon>lock_outline</md-icon>
          <label>密码...</label>
          <md-input v-model="password" type="password" @keyup.native.enter.prevent="login"></md-input>
        </md-field>
        <md-button slot="footer" class="md-simple md-success md-lg" @click="login">
          登录
        </md-button>
      </login-card>
    </div>
  </div>
</template>
<script>

import {LoginCard} from '@/components'
import {toast} from '@/utils/tools'
import {post} from '@/utils/ajax'
import * as api from '@/constants/api'
import auth from '@/utils/auth'

export default {
  components: {
    LoginCard
  },
  data () {
    return {
      email: null,
      password: null,
    }
  },
  methods:{
    login(){
      if(!this.email || !this.password){
        toast('请输入邮箱和密码', 'warning')
        return;
      }
      post(api.LOGIN, {email: this.email, password: this.password}).then(data=>{
        auth.setToken(data);
        this.$router.push(this.$route.query.redirect || '/');
        toast('登录成功')
      })
    },
  }
}
</script>

<style>
</style>
